<template>
  <div class="app-container">
    <!-- 顶部选择和操作按钮 -->
    <el-row>
      <el-col :span="24">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="站点：">
            <el-select v-model="formInline.id" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.segmentname"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间：">
            <el-date-picker
              v-model="selectedMonth"
              type="month"
              format="yyyy-MM"
              value-format="yyyy-MM"
              @change="handleMonthChange"
              placeholder="选择月"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleExport">导出</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <!-- 主要内容区域 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <!-- 表格展示监测数据 -->
        <div class="table-container">
          <div class="table-header">
            <h3>{{ formInline.date }}监测数据日报表</h3>
          </div>
          <el-table
            id="selectTable"
            :data="tableData"
            style="width: 100%"
            border
            :span-method="objectSpanMethod"
            :header-cell-style="{ background: '#f5f7fa', color: '#303133' }"
            :cell-style="{ padding: '10px 0' }"
          >
            <el-table-column
              v-for="column in tableOp"
              :key="column.prop"
              :prop="column.prop"
              :label="column.label"
              align="center"
            >
              <template slot-scope="scope">
                <!-- 高亮显示异常值 -->
                <span
                  v-if="scope.row[column.prop + '_v'] == '1'"
                  style="color: red"
                  >{{ scope.row[column.prop] }}</span
                >
                <span v-else>{{ scope.row[column.prop] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import tableToExcel from "@/utils/tableToExcel";
import { getDmList } from "@/api/dataResources/monitorData/section.js";
import { getzynyReport } from "@/api/riverGeneralMange/riverGeneralMange.js";
export default {
  data() {
    return {
      options: [],
      formInline: {
        id: "",
      },
      selectedMonth: "",
      startDate: "",
      endDate: "",
      tableOp: [],
      tableData: [],
    };
  },
  computed: {},
  created() {
    // 页面加载时设置默认选中当前月
    this.setDefaultMonth();
  },
  mounted() {
    this.getGm();
  },
  methods: {
    //获取站点的列表
    getGm() {
      let query = {
        pageNum: 1,
        pageSize: 1000,
        isauto: "1",
        isdrink: "0",
      };
      getDmList(query).then((res) => {
        console.log(">>>ssss", res);
        this.formInline.id = res.rows[0].id;
        this.options = res.rows;
        // 获取表格数据
        this.getList();
      });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex >= this.tableData.length - 2) {
        if (columnIndex == 1) {
          return [1, this.tableOp.length - 1];
        }
        if (columnIndex > 1) {
          return [0, 0];
        }
      }
    },
    onSubmit() {
      console.log(">>>selectedMonth", this.selectedMonth);
      this.getList();
    },
    /** 导出按钮操作 */
    handleExport() {
      tableToExcel.getExcel("#selectTable", "监测数据月报表");
    },

    //获取表格数据
    getList() {
      let query = {
        id: this.formInline.id,
        startTime: this.startDate,
        endTime: this.endDate,
      };
      // 获取表格数据
      getzynyReport(query).then((response) => {
        console.log(">>>table data", response);
        // this.tableData = response.data || [];
        if (response.code == 200) {
          this.tableOp = response.data.tableOp;
          this.tableData = response.data.tableData;
        }
      });
    },

    firstMount() {
      // 计算选中月份的第一天和最后一天
      const [year, month] = this.selectedMonth.split("-").map(Number);
      // 月份第一天
      const firstDay = new Date(year, month - 1, 1);
      // 月份最后一天（下个月第一天减1天）
      const lastDay = new Date(year, month, 0);

      this.startDate = this.formatDate(firstDay);
      this.endDate = this.formatDate(lastDay);
    },
    // 设置默认选中当前月
    setDefaultMonth() {
      const today = new Date();
      const year = today.getFullYear();
      // 月份需要+1（因为getMonth()返回0-11）
      const month = String(today.getMonth() + 1).padStart(2, "0");
      // 格式化为 yyyy-MM 与value-format保持一致
      this.selectedMonth = `${year}-${month}`;
      this.firstMount();
    },
    // 处理月份选择变化
    handleMonthChange(val) {
      if (!val) return;

      // 计算选中月份的第一天和最后一天
      const [year, month] = val.split("-").map(Number);
      // 月份第一天
      const firstDay = new Date(year, month - 1, 1);
      // 月份最后一天（下个月第一天减1天）
      const lastDay = new Date(year, month, 0);

      this.startDate = this.formatDate(firstDay);
      this.endDate = this.formatDate(lastDay);
    },

    // 日期格式化工具（转为yyyy-MM-dd）
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
  },
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.table-container {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.table-header {
  padding: 15px 20px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  text-align: center;
}

.table-header h3 {
  margin: 0;
  color: #303133;
  font-size: 16px;
}

.ai-performance {
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

.ai-badge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  background-color: #f5f7fa;
  border: 1px solid #e4e7ed;
}

.ai-icon {
  width: 40px;
  height: 40px;
  background-color: #409eff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.ai-label {
  font-size: 14px;
  color: white;
  font-weight: bold;
}

.performance-meter {
  width: 100%;
  text-align: center;
}

.meter-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 8px;
}

.meter-bar {
  height: 8px;
  background-color: #e4e7ed;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.bar-fill {
  height: 100%;
  background-color: #409eff;
  transition: width 0.3s ease;
}

.meter-details {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 12px;
  color: #666;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.arrow-up {
  color: #409eff;
}

.arrow-down {
  color: #f56c6c;
}

.el-table .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-table th {
  font-weight: 500;
  color: #303133;
}
</style>
